<template>
    <div>
        <div class="cons">
            <div style="height:40px"></div>
            <div class="news-1">
                <p>{{ qyData.title }}</p>
            </div>
            <div class="news">
                <div class="news-0">
                    <h1
                        :class="curIndex == 0 ? 'news-0-on' : ''"
                        @click="onTab(0)"
                    >
                        申报须知
                    </h1>
                    <h1
                        :class="curIndex == 1 ? 'news-0-on' : ''"
                        @click="onTab(1)"
                    >
                        附件下载
                    </h1>
                    <h1
                        :class="curIndex == 2 ? 'news-0-on' : ''"
                        @click="onTab(2)"
                    >
                        申报表填报
                    </h1>
                </div>
                <div class="news-2">
                    <div class="news-21" v-if="curIndex == 0">
                        <div v-html="files.content"></div>
                    </div>
                    <div class="news-23" v-if="curIndex == 1">
                        <div>
                            <p>企业-承诺书和商标申请书</p>
                            <a
                                :href="prefixUrl + files.coverFileUrl"
                                target="_blank"
                                >下载</a
                            >
                        </div>
                    </div>
                    <div class="news-22" v-if="curIndex == 2">
                        <div class="form-con1">
                            <h1>{{ qyData.title }}</h1>
                            <div style="height:50px"></div>
                            <div class="pc-211">
                                <el-form
                                    :model="formData"
                                    :rules="rules"
                                    ref="formData"
                                    label-width="200px"
                                    class="demo-ruleForm"
                                >
                                    <div class="form-con">
                                        <el-form-item
                                            label="企业-承诺书和商标申请书"
                                            prop="fileUrl"
                                        >
                                            <el-upload
                                                class="upload-demo"
                                                action="http://www.jssggxh.com:8082/tianti_module_interface/file/fitment/upload"
                                                :on-remove="handleRemove"
                                                :on-success="handleSuccess"
                                                :before-upload="
                                                    beforeAvatarUpload
                                                "
                                                :on-exceed="handleExceed"
                                                :file-list="fileList"
                                            >
                                                <el-button
                                                    size="small"
                                                    type="primary"
                                                    >点击上传
                                                </el-button>
                                                <div
                                                    slot="tip"
                                                    class="el-upload__tip"
                                                >
                                                    请上传zip压缩文件
                                                </div>
                                            </el-upload>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                            <div class="pc-212">
                                <a href="JavaScript:;" @click="onRelease"
                                    >提交</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import _ from "underscore";
import moment from "moment";
import { validPhone, validEmpty } from "@/utils/validate";

export default {
    data() {
        return {
            curIndex: 0,
            qyData: {},
            files: {},
            prefixUrl: "",
            fileList: [],
            formData: {
                fileUrl: [],
            },
            rules: {
                fileUrl: [
                    {
                        required: true,
                        message: "请上传资源文件",
                        trigger: "blur",
                    },
                ],
            },
            user: {},
        };
    },
    props: {
        param: {
            type: Object,
        },
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        this.user = this.$store.getters.user;
        if (this.param) {
            this.getQyzzList(1);
        }
    },
    mounted() {},
    watch: {
        param: {
            handler(val, oldVal) {
                this.getQyzzList(1);
            },
            deep: true,
        },
    },
    methods: {
        onTab(index) {
            if (index > 0 && this.user.registType != 2) {
                this.$message.error("对不起，您的权限不足");
                return false;
            }
            this.curIndex = index;
        },
        async getQyzzList(val) {
            const data = {
                currentPage: val,
                pageSize: 10,
                rootId: this.param.id,
            };
            const res = await this.$store.dispatch("news/getQyzzList", data);
            this.qyData = res.list[0];
            this.getQyzzDes(this.qyData.id);
        },
        async getQyzzDes(id) {
            var data = { id: id };
            const res = await this.$store.dispatch("news/getQyzzDes", data);
            this.files = res;
        },

        async commitmentApplicationFrontSave() {
            this.formData.userId = this.$store.getters.user.id;
            this.formData.fileUrl = this.formData.fileUrl.join(",");
            this.formData.menuType = this.param.id;
            const res = await this.$store.dispatch(
                "access/commitmentApplicationFrontSave",
                this.formData
            );
            this.$message({
                message: "资质申请信息提交成功",
                type: "success",
            });
            this.$router.push("/home");
        },
        onRelease() {
            this.$refs.formData.validate((vaild) => {
                if (vaild) {
                    this.commitmentApplicationFrontSave();
                }
            });
        },
        handleExceed(files, fileList) {
            this.$message.error("上传文件最多只能1个!");
        },
        beforeAvatarUpload(file) {
            this.formData.fileName = file.name;
            const isZIP = file.type === "application/x-zip-compressed";
            const isZip2 = file.type === "application/zip";
            if (!isZIP && !isZip2) {
                this.$message.error("上传文件只能是 zip 格式!");
                return false;
            }
            return true;
        },
        handleSuccess(res, file) {
            if (res.code == 200) {
                this.formData.fileUrl.push(res.data.url);
            }
        },
        handleRemove(file, fileList) {
            this.formData.coverImageUrl = [];
        },
    },
};
</script>

<style scoped>
@import "./zizhisq.css";
</style>
